<template>
  <!-- 添加或修改岗位对话框 -->
  <el-dialog :title="title" v-model="model" width="800px" append-to-body>
    <el-form
      ref="communityRef"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="小区名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入小区名称" />
      </el-form-item>
      <el-form-item label="小区地址" prop="area">
        <div style="width: 100%; display: flex">
          <el-col :span="11">
            <el-cascader
              style="width: 100%"
              :options="pcaTextArr"
              v-model="form.area"
            />
          </el-col>
          <el-col :span="12" :offset="1">
            <el-input v-model="form.address" placeholder="详细地址" />
          </el-col>
        </div>
      </el-form-item>
      <el-form-item label="小区负责人" prop="contactName">
        <el-input v-model="form.contactName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="联系信息" prop="contactPhone">
        <el-input
          v-model="form.contactPhone"
          type="textarea"
          :rows="4"
          placeholder="联系人: 电话号码(一行一个)"
        />
      </el-form-item>
      <el-form-item label="启用状态" prop="status">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">完 成</el-button>
        <el-button @click="model = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// import {provinceAndCityData,pcTextArr,regionData,pcaTextArr, codeToText} from "element-china-area-data";
import { pcaTextArr } from "element-china-area-data";
import { ref, getCurrentInstance, computed, onMounted } from "vue";
import { saveCommunity, updateCommunity } from "@/api/realEstateManage";
import useBaseStore from "@/store/modules/base";
const { proxy } = getCurrentInstance();
const baseStore = useBaseStore();

const props = defineProps({
  title: {
    type: String,
    default: "新增小区",
  },
  row: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["submit"]);

const model = defineModel({
  default: false,
});
const isEdit = computed(() => !!props.row.id);
const form = ref({
  name: "",
  area: [],
  address: "",
  contactName: "",
  contactPhone: "",
  status: 1,
});
const rules = ref({
  name: [{ required: true, message: "请输入小区名称", trigger: "blur" }],
  status: [{ required: true, message: "请选择启用状态", trigger: "blur" }],
  area: [
    { required: true, message: "请选择小区地址", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请选择小区地址"));
        } else if (!form.value.address) {
          callback(new Error("请输入小区地址"));
        } else {
          callback();
        }
      },
    },
  ],
  contactName: [
    { required: true, message: "请输入小区负责人", trigger: "blur" },
  ],
  // contactPhone: [
  //   { required: true, message: "请输入负责人电话", trigger: "blur" },
  //   {
  //     validator: (rule, value, callback) => {
  //       if (!/^1[3456789]\d{9}$/.test(value)) {
  //         callback(new Error("请输入正确的手机号码"));
  //       } else {
  //         callback();
  //       }
  //     },
  //   },
  // ],
});

onMounted(() => {
  if (isEdit.value) {
    form.value = {
      ...props.row,
      area: [props.row.province, props.row.city, props.row.area],
    };
  }
});

/** 提交按钮 */
function submitForm() {
  proxy.$refs["communityRef"].validate((valid) => {
    if (valid) {
      const params = {
        ...form.value,
        province: form.value.area[0] || "",
        city: form.value.area[1] || "",
        area: form.value.area[2] || "",
        fullAddress: `${form.value.area.join(" ")} ${form.value.address}`,
      };
      const api = isEdit.value ? updateCommunity : saveCommunity;
      api(params).then(({ data }) => {
        if (data) {
          proxy.$modal.msgSuccess(isEdit.value ? "修改成功" : "新增成功");
          model.value = false;
          baseStore.getCommunityList();
          emit("submit");
        }
      });
    }
  });
}
</script>
<style scoped lang="scss">
.el-form {
  .el-input,
  .el-cascader {
    width: 100%;
  }
}
</style>
